import React, { useEffect, useState } from "react";
import '../Cart/CartConfrim.css'
import { useNavigate } from "react-router-dom";
import { Space } from 'react-vant'
import { ArrowLeft, Arrow } from '@react-vant/icons'
import axios from "axios";
import { message } from "antd";
axios.defaults.baseURL = 'http://127.0.0.1:3000/';
export default function CartConfrim() {
    const Navigate = useNavigate()
    const toto = () => {
        Navigate(-1)
    }

    const [cart, setCart] = useState([])

    const getCart = async () => {
        let { data: { code, cart } } = await axios.get('/sUnJIahuI/cart')
        if (code === 200) {
            setCart(cart)
        }
    }
    
    const totalPrice = cart.reduce((a, b) => a + b.count * b.price, 0)

    const totalNum = cart.reduce((a, b) => a + b.count, 0)

    const [id,setID] = useState("")

    const getUser = async () => {
        let { data: { code, id ,adress} } = await axios.get('/sUnJIahuI/login')
        // console.log(id);
        // console.log(adress);
        setAddress(adress)
        setID(id)
    }

    

    const [address,setAddress] = useState([])
    console.log(address);

    useEffect(() => {
        getCart()
        getUser()
    }, [])
    const handleAdd = async () => {
        let newCart = cart.filter(item => item.count > 0)
        let obj = {state:1,goodsid:newCart,address:address,uid:id}
        let {data:{code}}=await axios.post('/sUnJIahuI/addOrder',obj)
        if(code === 200){
            message.success("下单成功")
            Navigate('/orderform?cate=1')
        }

        
    }
    return (
        <>
            <div className="CartConfrimBigBox">
                <div className="CartconfrimOneBox">
                    <svg t="1731122622565" className="oneBoxIcon" onClick={() => toto()}
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4255" width="32" height="32"><path d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" fill="#bfbfbf" p-id="4256"></path></svg>
                    <span className="oneBoxText">确认订单</span>
                </div>
                <div className="CartconfrimContentBox">
                    <div className="CartConfrimAddressBox">
                    {
                        address == [] ?
                        <>
                            <span className="Box2Text1">暂未获取到收到地址</span>
                            <span className="Box2Text2">+新增收到地址</span>
                        </>:
                        <>
                            {
                                address.map((item)=>{
                                    return <div key={item._id}>
                                        <span className="addressName">姓名：{ item.name }</span>
                                        <p className="addressPhone">电话：{ item.phone }</p>
                                        <p className="addressAddress">收获地址：{item.address}</p>
                                    </div>
                                })
                            }
                        </>
                    }
                    </div>
                    <div className="ContentCartBox">
                        {
                            cart.filter(item=>item.count > 0).map((item) => {
                                return <div key={item._id} className="cart">
                                    <div><img src={item.img} width={"70rem"} height={"80rem"} className="cartConfrimImg"></img></div>
                                    <div>
                                        <p className="cartConfrimText1">{item.name}/{item.spece}枝</p>
                                        <p className="cartConfrimText2">{item.spece}枝/扎</p>
                                        <p className="cartConfrimText3">￥{item.price}</p>
                                        <p className="cartConfrimText4">×{item.count}</p>
                                    </div>
                                </div>

                            })
                        }
                    </div>
                    <div className="ContentBoxText1">
                        <p className="box4P-text">
                            <span className="Box4Text1">商品总价</span>
                            <span className="Box4Text2">共{totalNum}件商品</span>
                            <span className="Box4Text3">￥{totalPrice}</span>
                        </p>
                        <div className="box4Inbox1">
                            <span className="Box4Text4">优惠卷</span>
                            <span className="Box4Text5">暂无可用</span>
                            <Space className='demo-icon' gap={20}>
                                <Arrow className="Box4Icon" />
                            </Space>
                        </div>
                        <p className="box4P-text2">
                            <span className="CartConfrimBox4Text6">合计:</span>
                            <span className="CartConfrimBox4Text7">￥{totalPrice}</span>
                        </p>
                    </div>
                    <div className="ContentBoxText2">
                        <span className="CartConfrimBox5Text1">买家留言:</span>
                        <span className="CartConfrimBox5Text2">留言建议与商家协商(250字以内)</span>
                    </div>
                </div>
                <div className="CartconfrimButtomBox">
                    <span className="ConfrimButtombuttomBoxText1">合计：</span>
                    <span className="ConfrimButtombuttomBoxText2">￥{totalPrice}</span>
                    <button className="ConfrimButtombuttomBoxButton" onClick={() => handleAdd()}>提交订单</button>
                </div>
            </div>
        </>
    )
}